<template>
	<a-drawer v-model:open="visible" ref="employeeDetailGunModalRef" class="edit-drawer modal-fixed-bottom"
		root-class-name="root-customer-drawer" width="800px" :closable="false" @close="onClose">
		<div class="closeable" @click="onClose">{{ $t('self.closeButton') }}</div>
		<div class="modal-header">{{ title }}</div>
		<a-form :model="formState" :rules="formRules" :label-col="labelCol" :wrapper-col="wrapperCol"
			@finish="onSubmit">
			<a-form-item :label="gunLabel" name="chargeInterface">
				<a-select mode="multiple" v-model:value="formState.chargeInterface" :options="cdqjkOptions"
					:fieldNames="{label: 'label',value: 'key'}" :placeholder="$t('self.pleaseChoose')" />
			</a-form-item>
			<div class="base-flex base-rows base-justify-center base-align-items-center base-mt10">
				<a-button type="primary" html-type="submit">{{ $t('self.submitButton') }}</a-button>
				<a-button class="base-ml10" @click="onClose">{{ $t('self.cancelButton') }}</a-button>
			</div>
		</a-form>
	</a-drawer>
</template>


<script setup>
	import {
		computed,
		getCurrentInstance,
		onMounted,
		ref,
		nextTick
	} from 'vue'
	import {
		message
	} from 'ant-design-vue'
	import chooseAreaForLocal from '@/components/choose/choose-area-for-local.vue'
	const {
		proxy
	} = getCurrentInstance()
	const $TOOL = proxy.$TOOL
	const $API = proxy.$API
	const $T = proxy.$t
	const emit = defineEmits(['close', 'ok'])

	const visible = ref(false)
	const mode = ref('add')
	const labelCol = {
		style: {
			width: '230px',
		},
	};
	const wrapperCol = {
		span: 16,
	};
	const title = ref('')
	const gun = ref({})
	const formState = ref({
		"id": '',
		"chargeInterface": [],
		"gun": {}
	})

	const cdqjkOptions = ref([{
			label: 'Type 2',
			key: 'Type 2'
		},
		{
			label: 'SAE J1772',
			key: 'SAE J1772'
		},
		{
			label: 'CHAdeMO',
			key: 'CHAdeMO'
		},
		{
			label: 'GB/T',
			key: 'GB/T'
		},
		{
			label: 'Tesla',
			key: 'Tesla'
		}
	])

	const formRules = ref({
		chargeInterface: [{
			required: true,
			message: $T('self.pleaseChoose') + $T('self.businessCharging.tips16'),
			trigger: 'change'
		}],
	})

	onMounted(() => {

	});

	const onSubmit = (values) => {
		$API.backend.businessCharging.editGun.post({
			id: gun.value.id,
			type: formState.value.chargeInterface.join(',')
		}).then(res => {
			message.success($T('self.message.success'))
			onReset()
			visible.value = false
			emit('ok')
		}).catch(err => {
			message.error(err.msg);
		})
	}

	const onReset = () => {
		formState.value = {
			"chargeInterface": [],
			"gun": '',
			"id": ''
		}
		gun.value = {}
	}

	const onClose = () => {
		onReset()
		visible.value = false
		emit('close')
	}
	const add = (stationId, gunObj) => {
		mode.value = 'add'
		title.value = $T('self.businessCharging.tips21')
		formState.value.stationId = stationId
		formState.value.chargeInterface = gunObj.type ? gunObj.type.split(',') : []
		gun.value = gunObj // 设置 gun 对象
		visible.value = true
	}

	const edit = (record) => {
		console.log("Editing record:====", record);
		mode.value = 'edit';
		formState.value.chargeInterface = record.type ? record.type.split(',') : []
		$TOOL.array.cloneExistKey(formState.value, record);
		gun.value = record;
		title.value = $T('self.businessCharging.tips21');
		visible.value = true;
	};

	const gunLabel = computed(() => {
		if (gun.value.gunNo === 1) {
			return `A枪 ${$T('self.businessCharging.tips16')}`;
		} else if (gun.value.gunNo === 2) {
			return `B枪 ${$T('self.businessCharging.tips16')}`;
		}
		return `${gun.value.gunNo} ${$T('self.businessCharging.tips16')}`;
	});

	const openModalGun = (gunObj, index) => {
		nextTick(() => {
			edit(gunObj, index)
		})
	}

	defineExpose({
		add,
		edit,
		openModalGun
	})
</script>


<style lang="scss" scoped>
	.edit-drawer {
		position: relative;

		.closeable {
			@include closeable;
		}
		.base-justify-center {
			justify-content: center;
		}
	}
</style>
